
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/bind/device_bind_logic.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/log_utils.dart';
import 'package:share_fit/app/ute/uteped_const.dart';
import 'package:share_fit/generated/locales.g.dart';


class DeviceBindPage extends StatelessWidget {
  /// 手表绑定列表页
  DeviceBindPage({super.key});

  final logic = Get.put(DeviceBindLogic());
  final state = Get.find<DeviceBindLogic>().state;

  @override
  Widget build(BuildContext context) {
    state.deviceList = [];
    if (Get.arguments != null) {
      state.deviceList = Get.arguments;
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.device_bind_title.ts,
            style: TextStyle(fontSize: 54.sp)),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.only(left: 43.w, top: 100.h, right: 42.w),
          child: ListView.separated(
              itemBuilder: (context, index) {
                return _buildListItem(context, state.deviceList[index]);
              },
              separatorBuilder: (BuildContext context, int index) => Divider(
                    height: 49.h,
                    color: Colors.transparent,
                  ),
              itemCount: state.deviceList.length),
        ),
      ),
    );
  }

  Widget _buildListItem(BuildContext context, item) {
    return Container(
      padding:
          EdgeInsets.only(left: 59.w, right: 59.w),
      decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(10))),
      child: SizedBox(
        height: 200.w,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              alignment: Alignment.centerLeft,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    item[UTEPedConst.keyName],
                    style: TextStyle(fontSize: 42.sp),
                  ),
                  Text(
                    item[UTEPedConst.keyAddress],
                    style: TextStyle(fontSize: 36.sp),
                  ),
                ],
              ),
            ),
            GetBuilder<DeviceBindLogic>(builder: (DeviceBindLogic controller) {
              if (item[UTEPedConst.keyAddress] == state.address) {
                return Container(
                  alignment: Alignment.center,
                  child: Image.asset('assets/images/device/device_connected.png', width: 69.w),
                );
              }
              else {
                return ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        minimumSize: Size(202.w, 86.w),
                        backgroundColor: const Color(0xFFF2F6FC)
                    ),
                    onPressed: () {
                      _bindDevice(context, item[UTEPedConst.keyName], item[UTEPedConst.keyAddress]);
                    },
                    child: Text(LocaleKeys.device_connect.ts,
                        style: TextStyle(color: Colors.black, fontSize: 42.sp)));
              }
            }),
          ],
        ),
      ),
    );
  }

  void _bindDevice(context, deviceName, address) {
    logger.d("binding $address");

    state.isConnecting = true;
    logic.connect(address, deviceName);
  }

}
